{% extends "common/base.html" %}

{% block head %}
    <script type="text/javascript">

        google.load("earth", "1");
        google.load('maps', '3', {"other_params":"sensor=false"});

        var ge = null;
        var gex = null;
        
        var options = {
            media_url: "{{MEDIA_URL}}",
            news_url: '{% url news-main %}',
            about_url: '{% url news-about %}'
        };
        
        // Used to identify whether the about or news panel should be shown
        {% if show_panel %}
            options.show_panel = '{{ show_panel }}';
        {% endif %}

        {% block layersConfig %}
        // setup which kml files are shown in the data layers panel
        lingcod.addLayer('{% url studyregion-kml %}', {setExtent: true});
        lingcod.addLayer('{% url public-data-layers %}');            
        lingcod.addLayer('{{MEDIA_URL}}/WestCoastMaritimeZones.kmz');            
        {% endblock layersConfig %}

        {% block sharedshapes %}
            {% if user.is_authenticated %}
                options.sharedshapes = ["{% url kmlapp-sharedlinks-kmz input_username=user.username session_key=session_key %}"];
                options.allow_copy = true;
            {% else %}
                options.sharedshapes = ["{% url kmlapp-publicshared-kmz 0 %}"];
                options.allow_copy = false;
            {% endif %}
        {% endblock sharedshapes %}

        {% block myshapes %}
            {% if user.is_authenticated %}
                options.myshapes = [{url: "{% url kmlapp-userlinks-kmz input_username=user.username session_key=session_key %}"}];
            {% endif %}
        {% endblock myshapes %}
                                        
        {% block addToOptions %}{% endblock addToOptions %}
        
        $(document).ready(function(){
            options.hideGoogleLayers = false;
            lingcod.init(options);
        });


    </script>
{% endblock %}

{% block body %}
    <div id="meta-navigation">
        <ul>
            <li><span style="font-size:1.3em;margin-right:20px;">Human Impacts on Marine Ecosystems Of The California Current</span></li>
            {% block metanavigation %}
            <!-- <li><a href="#" id="news">news</a> | </li> -->
            <li> <a href="#" id="about">about</a> | </li>
            {% block meta_navigation_list_insert %}{% endblock %}
            <!-- <li><a href="{% url help-main %}" target="_blank" id="help">help</a> | </li> -->
            {% if user.is_authenticated %}
            <li><a href="{% url user_profile-form user.username %}">my profile</a> | </li>
            <li><a href="{% url auth_logout %}">sign out</a></li>
            {% else %}
            <li><a href="{% url registration_register %}">register</a> | </li>
            <li><a href="{% url auth_login %}">sign in</a></li>
            {% endif %} 
            {% endblock metanavigation %}
            {% block meta_navigation_list_append %}{% endblock %}
        </ul>
        <br />
    </div>
    <ul class="menu_items" id="header_buttons">
        <!--<li id="layers_menu" class="item">
            <span>
                <a title="Data Layers" href="#DataLayers"><img src="{{MEDIA_URL}}/common/images/transparent.gif" width="44" height="48" /></a>
            </span>
        </li> -->
        <li id="tools_menu" class="item autosize">
            <span>
                <a title="Tools" href="#tools"><img src="{{MEDIA_URL}}/common/images/transparent.gif" width="44" height="48" /></a>
            </span>
        </li>
    </ul>
    <!-- <div id="sidebar-toggler"> &nbsp; </div>
    <a id="show-sidebar" href="#">show sidebar</a> -->
    <div id="sidebar" style="width:500px">
        <div id="sidebar-mask"><span class="loadingMsg"></span></div>
        <ul>
            {% block tabs %}
            <li><a href="#Model"><span>Impact Model</span></a></li>                
            <li><a href="#Zones"><span>Zones</span></a></li>                
            {% endblock tabs %}
        </ul>

        {% block tabscontents %}
        <div id="Model">
	<p>
           This map is an assessment of the current threats and impacts of human activities on the California Current marine ecosystem.
Quantitative assessment of spatial patterns of all human uses of the oceans and their cumulative effects is needed for implementing ecosystem-based management, marine protected areas, and ocean zoning.</p>
        <hr/>
        <div id="datalayerstree"></div>
        <!-- 
        <p> 
           You can browse the map and create points of interest to get a detailed summary 
           of a given location including cumulative impact scores, habitat, and level of human activities. 
        </p>
        <hr/>
        <input type="button" onclick="buttonClick()" value="Create New Point of Interest"/>
        <input type="button" onclick="removePOI()" value="Remove Point of Interest"/>
        <div id="poi_instructions" style="border: 1px solid; margin: 10px; padding:12px; color: #00529B; background-color: #BDE5F8;">
         Drag-and-drop the placemark for a detailed summary of that location
        </div>
        -->

        </div>            


	 <div id="Zones">
           {% if user.is_authenticated %}
	   <div style="font-size:1em;" id="myshapestree"></div>
           {% else %}
           <p> Zones allow you to define areas of interest and analyze the cumulative impacts based on a number of alternative scenarios. </p>
           <p> Please <a href="{% url auth_login %}">sign in</a> to your account in order to create your own zones.  You can <a href="{% url registration_register %}">register</a> for an account online; it only takes a minute. </p>
           {% endif %}
	 </div>

        {% endblock tabscontents %}
    </div>
    <div id="map_container" style="left:500px">
        <div id="map"></div>
    </div>
    <div id="tools">
        <h1>Tools</h1>
        <form id="flyToLocation" method="GET">
            <input type="text" name="flyto_location" value="">
            <a id="flytogo" href="#" class="button" onclick="this.blur(); return false;"><span>Fly Here</span></a>
            <a id="flytoclear" href="#" class="button red disabled" onclick="this.blur(); return false;"><span>Clear</span></a>
            <input type="submit" style="display:none;" />
            <br style="clear:both;" />
        </form>
        <hr />
        <div id="measurement_tools" class="tool">
            <a id="measure_distance" href="#" class="button" onclick="this.blur(); return false;"><span><img src="{{MEDIA_URL}}common/images/ruler.png">Measure Distance</span></a>
            <a id="measure_area" href="#" class="button" onclick="this.blur(); return false;"><span><img src="{{MEDIA_URL}}common/images/ruler_square.png">Measure Area</span></a>
            <a id="measure_clear" href="#" class="button red disabled" onclick="this.blur(); return false;"><span>Clear</span></a>
            <p style="clear:both;">
                Choose to measure distance or area and then draw a shape on the map. Double-click when finished drawing.
            </p>
            <div id="measureAmountHolder">
                <span id="measureAmount"></span>
                <select id="measure_units">
                    <option value="metric">metric</option>
                    <option value="english">english</option>
                    <option value="nautical">nautical</option>                            
                </select>
            </div>
        </div>
        <hr />
        <div id="earthOptions">
            <h3>Display Options</h3>
            <p>Toggle the various options below and your choices will be remembered the next time you use the tool.</p>
            <ul>
                <li id="overview"><span class="toggler"><img width="16" height="16" src="{{MEDIA_URL}}common/images/transparent.gif" /></span>Overview Map</li>
                <li id="scale"><span class="toggler"><img width="16" height="16" src="{{MEDIA_URL}}common/images/transparent.gif" /></span>Scale Legend</li>
                <li class="visible" id="nav"><span class="toggler"><img width="16" height="16" src="{{MEDIA_URL}}common/images/transparent.gif" /></span>Navigation Controls</li>
                <li id="terrain"><span class="toggler"><img width="16" height="16" src="{{MEDIA_URL}}common/images/transparent.gif" /></span>3d Terrain and Ocean Surface</li>
                <li class="visible" id="atm"><span class="toggler"><img width="16" height="16" src="{{MEDIA_URL}}common/images/transparent.gif" /></span>Atmosphere</li>
            </ul>
        </div>
    </div>
    <!-- <div id="DataLayers">
        <h1>Data Layers</h1>
    </div> -->
    <div style="display:none;" id="panel-holder"></div>
    <div id="geopanel">
        {% block shapeDefinitionPanel %}
        {#  This text is defined within a block here so that individual #}
        {#  projects can extend this block to modify the text #}
        <div class="panel">
            <div class="new" style="display:none;">
                {% block shapeDefinitionPanelNewShape %}
                <p>
                    To begin defining a shape, press the button below and 
                    click on the map where you would like to place a vertex. 
                    When finished, double click the last vertex of your shape.
                </p>                    
                {% endblock shapeDefinitionPanelNewShape %}
                <a href="#" class="draw_shape button" onclick="this.blur(); return false;"><span><img src="{{MEDIA_URL}}common/images/silk/pencil.png">Draw Shape</span></a>                
            </div>
            <div class="edit" style="display:none;">
                {% block shapeDefinitionPanelEditShape %}
                <p>
                    To edit this shape, press the button below and drag its 
                    handles.
                </p>                    
                {% endblock shapeDefinitionPanelEditShape %}
                <a href="#" class="edit_shape button" onclick="this.blur(); return false;"><span><img src="{{MEDIA_URL}}common/images/silk/shape_handles.png">Edit Shape</span></a>                
            </div>
            <div class="editing" style="display:none;">
                {% block editingShape %}
                <p>
                    Drag the handles of the shape to edit. You can add 
                    vertices to the shape by dragging the handle shown at the
                    midpoint of a line. <strong>To remove a vertex, double-click on 
                    it.</strong>
                    <br />
                    When you are done, click on the button below.
                </p>
                <a href="#" class="done_editing button" onclick="this.blur(); return false;"><span>Done Editing</span></a>                
                {% endblock editingShape %}
            </div>
            <div class="manipulated" style="display:none;">
                {% block shapeDefinitionPanelBeforeManipulatorContent %}                    
                {% endblock shapeDefinitionPanelBeforeManipulatorContent %}
                <p>
                    CONTENT FROM SERVER
                </p>
                {% block shapeDefinitionPanelAfterManipulatorContent %}                    
                {% endblock shapeDefinitionPanelAfterManipulatorContent %}
                <a href="#" class="edit_shape button" onclick="this.blur(); return false;"><span><img src="{{MEDIA_URL}}common/images/silk/shape_handles.png">Edit Shape</span></a>                
            </div>
            <div id="manipulators_server_error" style="display:none;">
                <h3>Server Error</h3>
                <p>There was a server error processing your shape. You can try editing this shape again by pressing the "Edit Shape" button below. If problem may be specific to the region you are drawing within.</p>
                <p>Please contact an administrator at help@marinemap.org if the problem persists.</p>
            </div>
        </div>
        {% endblock shapeDefinitionPanel %}
    </div>
{% endblock %}


